<template>
  <!-- 透视相机 -->
  <div>
    <div class="btn-box">
      <el-button> </el-button>
    </div>
    <!-- 创建三维场景，可通过鼠标缩放与移动方块 -->
    <div id="scene"></div>
  </div>
</template>

<script>
import * as THREE from "three";

let scene; //场景
let camera; //相机
let renderer; //创建渲染器
export default {
  name: "Scene",
  data() {
    return {};
  },
  mounted() {
    this.createScene();
    this.createMesh();
    this.createLight();
    this.createCamera();
    this.createRender();
    this.render();
  },
  methods: {
    createScene() {
      //创建场景
      scene = new THREE.Scene();
    },
    // 创建网格模型
    createMesh() {
      // 创建一个立方体几何对象Geometry
      const geometry = new THREE.BoxGeometry(120, 120, 120);
      // 材质对象Material
      const material = new THREE.MeshLambertMaterial({
        color: 0xe1e1e1,
      });
      // 网格模型对象Mesh
      let mesh = new THREE.Mesh(geometry, material);
      scene.add(mesh);
    },
    createLight() {
      // 点光源
      const point = new THREE.PointLight(0xffffff);
      // 点光源位置
      point.position.set(400, 200, 300);
      // 点光源添加到场景
      scene.add(point);

      // 环境光
      const ambient = new THREE.AmbientLight(0x666666);
      scene.add(ambient);
    },
    createCamera() {
      const element = document.getElementById("scene");
      /**
       * 这一投影模式被用来模拟人眼所看到的景象，它是3D场景的渲染中使用得最普遍的投影模式。
       *  var camera = new THREE.PerspectiveCamera( fov, aspect, near, far )
       *  @param {number} fov 视场：即可以看到的角度范围，人的视场大约是180度，一般游戏的视场为60度到90度，推荐默认值45
       *  @param {number} aspect	长宽比：这个是渲染结果输出区域的横向长度和纵向长度的比值；长宽比决定了水平视场和垂直视场之间的比例关系，推荐默认值：window.innerWidth/window.innerHeight
       *  @param {number} near	近面：基于相机位置，表示从这里开始渲染场景；一般会设置一个很小的值，默认值0.1
       *  @param {number} far	远面：基于相机位置，表示停止渲染的位置；要注意设置合适的距离，如果设置太小，部分场景可能渲染不到，但如果设置的太大，会影响渲染的效率，默认值1000
       * */
      camera = new THREE.PerspectiveCamera(
        45,
        element.clientWidth / element.clientHeight,
        0.1,
        1000
      );
      camera.position.set(200, 300, 200); // 设置相机位置
      camera.lookAt(scene.position); //设置相机方向
      scene.add(camera);
    },
    // 创建渲染器
    createRender() {
      const element = document.getElementById("scene");
      renderer = new THREE.WebGLRenderer();
      // 设置渲染区域尺寸
      renderer.setSize(element.clientWidth, element.clientHeight);
      // 设置背景色
      renderer.setClearColor(0x3f3f3f, 1);
      element.appendChild(renderer.domElement);
    },
    render() {
      renderer.render(scene, camera);
      // 通过requestAnimationFrame实现周期性调用render
      requestAnimationFrame(this.render);
    },
  },
};
</script>

<style scoped lang="less">
#scene {
  width: 100vw;
  height: 100vh;
  z-index: 2;
  position: absolute;
  top: 0%;
}
</style>
